<template>
    <div style="width:610px;height:400px;margin:0 auto;position: relative;">
        <ul class="box">
            <li v-for="(item,index) in list1" :key="index" class="box_item" @click="selectItem(item)">
                <div class="box_item_div">
                    <img :src="item.url" style="width:100%;"/>
                    <span>{{item.kuwei}}</span>
                </div>
            </li>
        </ul>
        <!-- <ul class="boxItem" v-else>
            <li v-for="(item,index) in list1" :key="index" class="boxItem_item">
                <div class="box_item_div">
                    <img :src="item.url" style="width:100%;"/>
                    <span>{{item.kuwei}}</span>
                </div>
            </li>
        </ul> -->
        <div class="navigation">
            <ul class="minBox" v-drag>
                <li v-for="(item,index) in list" :key="index" class="minBox_item" @click="select(item)">
                    <div class="minBox_item_div">
                        <img :src="item.url" style="width:100%;"/>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// import { Viewer } from 'photo-sphere-viewer'
// import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
  export default {
    methods: {
    },
    data() {
        return {
            flag:true,
            list1:[],
            list:[
                {'name':'钢卷1',billno:'123',kuwei:'1-1-2',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷1',billno:'123',kuwei:'1-1-2',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷1',billno:'123',kuwei:'1-1-2',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷1',billno:'123',kuwei:'1-1-2',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷1',billno:'123',kuwei:'1-1-2',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷1',billno:'123',kuwei:'1-1-2',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷1',billno:'123',kuwei:'1-1-2',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷1',billno:'123',kuwei:'1-1-2',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷2',billno:'124',kuwei:'1-1-3',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷3',billno:'125',kuwei:'1-1-4',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷4',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
                {'name':'钢卷5',billno:'126',kuwei:'1-1-5',url:require('@/assets/images/gangjuan.png')},
            ]
        };
    },
    directives:{
        drag(el,bindings){
            el.onmousedown = function(e){
                var disx = e.pageX - el.offsetLeft;
                var disy = e.pageY - el.offsetTop;
                document.onmousemove = function (e){
                    el.style.left = e.pageX - disx+'px';
                    el.style.top = e.pageY - disx+'px';
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
            }
        }
    },
    methods:{
        select(info){
            // 查询该库区的所有库位
            let kwList = [];
            for(let i=0;i<this.list.length;i++){
                if(this.list[i].kuwei==info.kuwei){
                    kwList.push(this.list[i]);
                }
            }
            this.list1 = [].concat(kwList);
        },
        selectItem(info){

        }
    },
    created(){
        this.list1 = [].concat(this.list);
    }
  };
</script>
<style>
ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
.box{
    margin: 100px auto;
    width: 100%;
    height: 100%;
    list-style: none;
    border: 1px solid black;
    overflow: scroll;
    text-align: center;
}
.box .box_item{
    border:1px;
    /* padding: 2px; */
    width: 60px;
    text-align:center;
    float: left;
}
.box .box_item .box_item_div{
    width: 100%;
}
.box .box_item .box_item_div:hover{
    background: red;
    
}
.navigation{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 680px;
    top: -10px;
    border: 1px solid black;
    padding: 10px;
    overflow: scroll;
}
.navigation .minBox_item{
    width: 20px;
    height: 20px;
    float: left;
    list-style: none;
}
.navigation .minBox_item .minBox_item_div{
    /* float: left; */
}
.boxItem{
    margin: 100px auto;
    width: 100%;
    height: 100%;
    list-style: none;
    border: 1px solid black;
    overflow: scroll;
    text-align: center;
}
.box_item{
    
}
</style>